<template>
  <div class="repeat-box">
    <el-form
      ref="ruleForm"
      :rules="rules"
      :model="form"
      label-width="80px"
      label-position="left">
      <el-form-item :label="$t('oa.calendar.8838c914cc998bc202943cdb5e3bfef0')">
        <el-select
          v-model="form.repetitionType"
          :placeholder="$t('oa.calendar.a97dd31ce9b1e4c4e0e3008b9075d06b')"
          @change="changeRepeat">
          <el-option
            v-for="item in repeatList"
            :key="item.value"
            :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
      <template v-if="form.repetitionType != 1">
        <el-form-item
          :label="$t('oa.calendar.a32d8d166ecf96461db3fc375f7fb8d6')"
          style="white-space: nowrap;"
          prop="repeatRate"
          class="form_1">
          <el-input
            v-model.number="form.repeatRate"
            type="number"
            min="0"
            autocomplete="off" />
          <span>{{ timeList[form.repetitionType] }}</span>
        </el-form-item>
        <el-form-item
          v-if="form.repetitionType != 2 && form.repetitionType != 5"
          class="form_1"
          :label="$t('oa.calendar.dc51115b4ca504a6399180d0977eed39')"
          prop="repeatTime">
          <el-checkbox-group
            v-if="form.repetitionType == 3"
            v-model="checkedRepeatTime"
            @change="changeRepeatTime">
            <el-checkbox
              v-for="item in repeatTimeList"
              :key="item.value"
              :label="item.label"
              :value="item.value" />
          </el-checkbox-group>
          <el-select v-else v-model="form.repeatTime">
            <el-option
              v-for="item in dayList"
              :key="item"
              :label="item"
              :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('oa.calendar.af54fd7f1541c97c651c4c37777307e1')"
          class="form_radio"
          prop="endTypeConfig">
          <el-radio-group v-model="form.endType" @change="changeEndDate">
            <el-radio label="1">
              {{ $t('oa.calendar.5b3752e7e0c48a78bc33db025a310484') }}
            </el-radio>
            <el-radio label="2">
              {{ $t('oa.calendar.d6cbc3c0859adc3a7edc38515e794035') }}
              <el-input
                v-model="endCount"
                :disabled="!(form.endType == 2)"
                type="number"
                class="radio_input" />
              {{ $t('oa.calendar.63d18f1f7054c613b476f94e1d25ebb6') }}
            </el-radio>
            <el-radio label="3">
              <span class="date_span">
                {{ $t('oa.calendar.7ac04b49a28381802afad0b3b1a68de0') }}
              </span>
              <el-date-picker
                v-model="endDate"
                :disabled="!(form.endType == 3)"
                class="form_date"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                :placeholder="$t('oa.calendar.14d200f43790c2031978e239efec3161')" />
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
      <el-form-item
        :label="$t('oa.calendar.0040f97e7116c784a16ff1f64d98fc50')"
        class="form_bottom">
        <div class="bottom-text" v-text="summaryText()" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Repeat',
  props: {
    repeatType: {
      type: Number,
      default: 0
    },
    detail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      form: {
        repeatTime: '',
        repeatRate: '', // 重复频率
        endType: '1', // 结束类型
        endTypeConfig: '', // 结束次数/时间
        repetitionType: 0
      },
      endDate: '',
      endCount: '',
      repeatList: [
        { label: this.$t('oa.calendar.5870da8c5dc8f14c559e23e8312e7b67'), value: 1 },
        { label: this.$t('oa.calendar.364c18d2c4706254595feb9dba0d9fc5'), value: 2 },
        { label: this.$t('oa.calendar.f26a7734175d680d59e5e8893f033dfb'), value: 3 },
        { label: this.$t('oa.calendar.6f1f36ad4674ff840dcf0789424ca4c9'), value: 4 },
        { label: this.$t('oa.calendar.aaaae1347b6223073934da69243d2f26'), value: 5 }
      ],
      timeList: [
        '',
        '',
        this.$t('oa.calendar.e855b377bb92c9b8b95eb70d93e08d61'),
        this.$t('oa.calendar.fb167015f20a47ef210b92b131b2f567'),
        this.$t('oa.calendar.ceb52457ed585fd73b699d064c64a1f0'),
        this.$t('oa.calendar.d29bc1366d25a7145758a3b08e7af4c7')
      ],
      checkedRepeatTime: [],
      repeatTimeList: [
        { label: this.$t('oa.calendar.242201c470d183c4410fa6468b1af0ec'), value: '1' },
        { label: this.$t('oa.calendar.a880be0f5964432b886d4122078ec190'), value: '2' },
        { label: this.$t('oa.calendar.29b58110e1ec8164277e347670f8ecf4'), value: '3' },
        { label: this.$t('oa.calendar.8b2098d90f9f6f957b30b9dfdcf9bf7e'), value: '4' },
        { label: this.$t('oa.calendar.0a0e59bf38f8cea1778d402844f04502'), value: '5' },
        { label: this.$t('oa.calendar.3c00a753d806cc7c6a206fe53408066b'), value: '6' },
        { label: this.$t('oa.calendar.8024ff0506b1136f726398bd60b499a8'), value: '7' }
      ],
      dayList: [],
      rules: {
        repeatRate: [
          { required: true, message: this.$t('oa.calendar.3320c5d6573481f2c2eeb8dbbe72bc0b'), trigger: 'blur' }
        ],
        endTypeConfig: [
          { required: true, message: this.$t('oa.calendar.de9e92e02ebc7b6fea99136e571804f5'), trigger: 'change' }
        ],
        repeatTime: [
          { required: true, message: this.$t('oa.calendar.6d1006be5160732323720943eb73686e'), trigger: 'change' }
        ]
      }
    };
  },
  watch: {
    endDate(val) {
      this.form.endTypeConfig = val
      this.$refs['ruleForm'].validateField('endTypeConfig')
    },
    endCount(val) {
      this.form.endTypeConfig = val
      this.$refs['ruleForm'].validateField('endTypeConfig')
    }
  },
  mounted() {
    this.dayList = []
    this.changeEndDate(1)
    this.form.repetitionType = this.repeatType
    if (Object.keys(this.detail).length) {
      this.form.repetitionType = this.detail.repetitionType
      this.form.repeatTime = this.detail.repeatTime || ''
      this.form.repeatRate = this.detail.repeatRate || ''
      this.form.endType = this.detail.endType + '' || ''
      if (this.detail.endType == 2) {
        this.endCount = this.detail.endTypeConfig
        this.endDate = ''
      } else if (this.detail.endType == 3) {
        this.endDate = this.detail.endTypeConfig
        this.endCount = ''
      }
      this.form.endTypeConfig = this.detail.endTypeConfig
      if (this.form.endType == 1 || !this.form.endType) {
        this.form.endTypeConfig = this.detail.endTypeConfig || 'useless'
      }
    }
    for (let i = 1; i <= 31; i++) {
      this.dayList.push(i)
    }
  },
  methods: {
    /**
     * 摘要文字
     */
    summaryText() {
      if (this.form.repetitionType === 1) {
        return this.$t('oa.calendar.8eb7c9da2146adf6200e60777ca49962');
      } else if (this.form.repetitionType === 2) {
        return this.$t('oa.calendar.3cdbbca8272a5ca6ac4d9bfe6138ad0c',{1:this.form.repeatRate});
      } else if (this.form.repetitionType === 3) {
        return this.$t('oa.calendar.a0996aaa6e6302636ac213349a942fbd',{1:this.form.repeatRate,2:this.checkedRepeatTime.join('、')});
      } else if (this.form.repetitionType === 4) {
        return this.$t('oa.calendar.c91f5a5f771e49463e6b300192715074',{1:this.form.repeatRate,2:this.form.repeatTime});
      } else if (this.form.repetitionType === 5) {
        return this.$t('oa.calendar.82f71232a365b328aba1e030fd6d689d',{1:this.form.repeatRate});
      }
    },

    /**
     * 改变结束类型
     */
    changeEndDate(value) {
      if (value == 1) {
        // 此值没有仅作为表单验证使用，没有任何意义
        this.form.endTypeConfig = 'useless'
        this.endDate = ''
        this.endCount = ''
      } else if (value == 2) {
        this.endDate = ''
        this.form.endTypeConfig = ''
      } else if (value == 3) {
        this.endCount = ''
        this.form.endTypeConfig = ''
      }
      this.$refs['ruleForm'].validateField('endTypeConfig')
    },

    /**
     * 改变重复类型
     */
    changeRepeat(value) {
      this.form = {
        repetitionType: value,
        repeatTime: '',
        repeatRate: '', // 重复频率
        endType: '1', // 结束类型
        endTypeConfig: '' // 结束次数/时间
      }
      this.changeEndDate(1)
    },

    /**
     * 改变重复时间
     */
    changeRepeatTime() {
      if (this.checkedRepeatTime.length) {
        const list = []
        this.repeatTimeList.forEach(item => {
          this.checkedRepeatTime.forEach(element => {
            if (item.label === element) {
              list.push(item.value)
            }
          })
        })
        this.form.repeatTime = list.join(',')
        this.$refs['ruleForm'].validateField('repeatTime')
      } else {
        this.form.repeatTime = ''
        this.$refs['ruleForm'].validateField('repeatTime')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom-text {
  color: $--color-text-regular;
}

::v-deep.el-form-item__content {
  width: 443px;
}

::v-deep.el-radio {
  display: block;
  height: 46px;
  line-height: 46px;
}

::v-deep.form_radio {
  margin-bottom: 10px;

  ::v-deep.el-form-item__content {
    margin-top: 0;
  }

  .el-form-item__error {
    left: 100px !important;
  }
}

.form_bottom {
  margin-bottom: 10px;
}

.radio_input {
  width: 200px !important;

  ::v-deep.el-input__inner {
    width: 145px !important;
    margin-left: 50px !important;
  }
}

.form_date {
  width: 200px !important;

  ::v-deep.el-input__inner {
    width: 200px !important;
  }
}

.date_span {
  display: inline-block;
  margin-right: 24px;
}
</style>
